<!--
 * @FileDescription: hr全局搜索某用户表单
 * @Author: 叶永鸿、袁年政
 * @Date: 2021-7-17
 * @LastEditors: 叶永鸿
 * @LastEditTime: 2021-7-18
 -->
<template>
  <el-container style="height: 500px">
    <el-header style="text-align: center; font-size: 12px">
      <el-input
        v-model="searcher.searchInput"
        placeholder="请输入员工姓名或者电话"
        style="width: 30%"
        @keyup.enter="searchSubmit(searchForm)"
      ></el-input>
      <el-button type="primary" @click="searchSubmit(searchForm)"
        >搜索</el-button
      >
    </el-header>
    <el-main>
      <div style="margin:0,auto;text-align:center;">
        <el-table
          :data="searchPageCtrl.gotSearchInfor"
          style="width: 80%;margin:auto"
          max-height="1000"
        >
          <el-table-column prop="picture" label="头像" width="200">
          </el-table-column>
          <el-table-column prop="realname" label="姓名" width="200">
          </el-table-column>
          <el-table-column prop="telephone" label="电话" width="300">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button
                @click="searchForMoreInfor(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="searchPageCtrl.page"
          layout="prev, pager, next"
          :total="searchPageCtrl.totalPage * 10"
          v-show="!searchPageCtrl.totalPage === 1"
          v-cloak
        >
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts">
//import searchInfor from "./searchInfor.vue";
import {
  //provide,
  ref,
  getCurrentInstance,
  computed,
  reactive,
  toRefs,
} from "vue";

import axios from "axios";
import router from "@/router";

import { useStore } from "vuex";
import { LoginState } from "@/store";

//import{searcher,searchRules} from '@/utils/searchValidators'

export default {
  name: "search",
  components: {},
  // searcher: {
  //   type: Object,
  //   require: true,
  // },

  setup() {
    // @ts-ignore
    const { proxy } = getCurrentInstance();

    const store = useStore<LoginState>();
    const loginInfor = computed(() => store.state.loginInfor);
    const hrSearched = computed(() => store.state.hrSearched);

    const getLoginInfor = computed(() => store.getters.getUserInfor);
    const getHrSearchInfor = computed(() => store.getters.getUser_hrSearch);

    interface Searcher {
      searchInput: string | number;
    }
    const searcher = ref<Searcher>({
      searchInput: store.getters.getUser_hrSearch.hrSearchNameOrTel,
    });

    const searchPageCtrl = reactive({
      //从store中获得刷新页面前的所有对应信息，保证页面刷新时不会丢失搜索数据
      //若不为刷新进入，则在store中的信息被已经初始化。
      //初始化信息：
      //gotSearchInfor：[]
      //page:1
      //totalPage:1
      gotSearchInfor: store.getters.getUser_hrSearch.hrSearchedInforList,
      page: store.getters.getUser_hrSearch.hrSearchPage,
      totalPage: store.getters.getUser_hrSearch.hrSearchTotalPage,
    });

    //provide("searchedInforToChild", searchPageCtrl.gotSearchInfor);
    const searchForMoreInfor = (row: any) => {
      //将当前行的员工详细信息显示
      //查看当前行的用户详细信息
      //这里获得的row，其实是对应行的整个Object，
      //console.log(row);
      //console.log(row.gender)将会打印对应行的用户的性别，由此，可以获得对应人的所有属性。

      axios
        .get("http://47.100.167.206:8082/Query/searchone", {
          params: { tel: row.telephone },
          headers: { token: store.getters.getUserInfor.token },
        })
        .then(
          function (response) {
            console.log("这是详细信息");
            console.log(response)
            console.log(response.data.data);
            store.commit("hrSearch", {
              hrSearchNameOrTel: proxy.searcher.searchInput,
              hrSearchPage: searchPageCtrl.page,
              hrSearchTotalPage: searchPageCtrl.totalPage,
              hrSearchedInforDetail: response.data.data, //将获得的员工个人详细信息传入
              hrSearchedInfor: row, //将行对应的员工简略信息传入
              hrSearchedInforList: searchPageCtrl.gotSearchInfor,
            });
            router.push({
              name: "searchPubInfor",
              params: { tel: row.telephone },
            }); //路由跳转
            //console.log(store.getters.getUser_hrSearch.hrSearchedInforDetail);
            //router.push({ name: "searchPubInfor", params: { tel: row.telephone } });
          },
          function (err) {
            console.log(err);
          }
        );
    };

    const searchSubmit = (formName: string) => {
      //搜索功能函数
      //console.log(proxy.searcher.searchInput);

      if (searchPageCtrl.page != 1) {
        //如果当前页面不为1，则证明已经获得了总页数，以及跳转到了第一页以后的页面，无需请求总页数
        axios
          .get("http://47.100.167.206:8082/Query/QueryHr", {
            params: {
              nameortel: proxy.searcher.searchInput,
              page: searchPageCtrl.page,
            },
            headers: { token: store.getters.getUserInfor.token },
          })
          .then(
            function (response) {
              console.log(response.data.data.length)
              store.commit("hrSearch", {
                hrSearchNameOrTel: proxy.searcher.searchInput,
                hrSearchPage: searchPageCtrl.page,
                hrSearchTotalPage: searchPageCtrl.totalPage,
                hrSearchedInforDetail: [],
                hrSearchedInfor: {},
                hrSearchedInforList: response.data.data, //得到员工的信息并存储。
              });
              // console.log(store.getters.getUser_hrSearch.hrSearchPage);
              console.log(response);
              //proxy.searchedInfor=response.data;
              searchPageCtrl.gotSearchInfor = response.data.data;
              // console.log(response.data);
              // console.log(typeof response.data.data);
              //console.log(proxy.searchedInfor);
              //console.log(searchPageCtrl.gotSearchInfor);
              //console.log(searchPageCtrl.gotSearchInfor[0].gender);
            },
            function (err) {
              console.log(err);
            }
          );
      } else {
        //先获取总页数，然后再获取第一页的信息。再将控制分页器显示的boolean值设置为真
        axios
          .get("http://47.100.167.206:8082/Query/queryPage", {
            params: {
              nameortel: proxy.searcher.searchInput,
            },
            headers: { token: store.getters.getUserInfor.token },
          })
          .then(
            function (response) {
              console.log(response);
              store.commit("hrSearch", {
                hrSearchNameOrTel: proxy.searcher.searchInput,
                hrSearchPage: searchPageCtrl.page,
                hrSearchTotalPage: response.data.data.data, //存储总页数
                hrSearchedInforDetail: [],
                hrSearchedInfor: {},
                hrSearchedInforList: [],
              });
              searchPageCtrl.totalPage = response.data.data.data;
              console.log(searchPageCtrl.totalPage);
              console.log(store.getters.getUser_hrSearch.hrSearchTotalPage);
            },
            function (err) {
              console.log(err);
            }
          );

        //获取第一页的用户信息
        axios
          .get("http://47.100.167.206:8082/Query/QueryHr", {
            params: {
              nameortel: proxy.searcher.searchInput,
              page: searchPageCtrl.page,
            },
            headers: { token: store.getters.getUserInfor.token },
          })
          .then(
            function (response) {
              store.commit("hrSearch", {
                //将搜索参数存储。
                hrSearchNameOrTel: proxy.searcher.searchInput,
                hrSearchPage: searchPageCtrl.page,
                hrSearchTotalPage: searchPageCtrl.totalPage,
                hrSearchedInforDetail: [],
                hrSearchedInfor: {},
                hrSearchedInforList: response.data.data, //将搜索得到的信息数组存储
              });
              // console.log(store.getters.getUser_hrSearch.hrSearchPage);
              console.log(response);
              //proxy.searchedInfor=response.data;
              searchPageCtrl.gotSearchInfor = response.data.data; //将搜索得到的员工信息传进template。
              // console.log(response.data);
              // console.log(typeof response.data.data);
              //console.log(proxy.searchedInfor);
              //console.log(searchPageCtrl.gotSearchInfor);
              //console.log(searchPageCtrl.gotSearchInfor[0].gender);
            },
            function (err) {
              console.log(err);
            }
          );
      }
    };

    const handleCurrentChange = (val: number) => {
      //换页时的操作
      searchPageCtrl.page = val; //将跳转的页传给页面控制属性。
      //获取当前页面的员工信息。
      axios
        .get("http://47.100.167.206:8082/Query/QueryHr", {
          params: {
            nameortel: proxy.searcher.searchInput,
            page: searchPageCtrl.page,
          },
          headers: { token: store.getters.getUserInfor.token },
        })
        .then(
          function (response) {
            store.commit("hrSearch", {
              hrSearchNameOrTel: proxy.searcher.searchInput,
              hrSearchPage: searchPageCtrl.page,
              hrSearchTotalPage: searchPageCtrl.totalPage,
              hrSearchedInforDetail: [],
              hrSearchedInfor: {},
              hrSearchedInforList: response.data.data, //得到员工的信息并存储。
            });
            // console.log(store.getters.getUser_hrSearch.hrSearchPage);
            console.log(response);
            //proxy.searchedInfor=response.data;
            searchPageCtrl.gotSearchInfor = response.data.data;
            // console.log(response.data);
            // console.log(typeof response.data.data);
            //console.log(proxy.searchedInfor);
            //console.log(searchPageCtrl.gotSearchInfor);
            //console.log(searchPageCtrl.gotSearchInfor[0].gender);
          },
          function (err) {
            console.log(err);
          }
        );
    };
    return {
      searchSubmit,
      searcher,
      //searchRules,
      getLoginInfor,
      ...toRefs(searchPageCtrl),
      searchPageCtrl,
      searchForMoreInfor,
      getHrSearchInfor,
      hrSearched,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped>
</style>
